<template>
    <div class="class-post">
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/user/class/class-members" tag="a">班级列表</router-link></li>
                <li class="gap">&gt;</li>
			</template>
			<li v-text="classNxt" style="color: #999;"></li>
				
		</nav-header>
        <div class="zh-h5-tabs">
            <el-button type="default" @click="toLink('/user/class/class-management')">成员</el-button>
            <el-button type="primary">岗位</el-button>
            <el-button type="default" @click="toLink('/user/class/class-timetable')">课程表</el-button>
            <el-button type="default" @click="toLink('/user/class/class-data')">资料</el-button>
        </div>
        <div class="zh-tabs">
             <div class="zh-table" v-loading="loading.status" :element-loading-text="loading.txt">
                 <div class="zh-table-open clear">
                     <div class="zh-open-left fl">
                        <div class="open-width">
                            <el-input v-model="jobsParam.keyword" placeholder="岗位名称" @keyup.enter.native="searchFunc"></el-input>
                        </div>
                        <el-button type="primary" @click="searchFunc">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
                        <!-- <el-button type="primary">岗位管理</el-button> -->
                        <el-button type="primary" @click="goToPost">岗位设置</el-button>
                    </div>
                </div>
                <div class="zh-table-contents">
					<el-table
					    :data="jobs_data"
					    border
					    max-height="600"
					    style="width: 100%">
					    <el-table-column
					      type="index"
                          :index="typeIndex"
					      label="序号"
					      align="center"
					      show-overflow-tooltip
					      width="50"
					      >
					    </el-table-column>
					    <el-table-column
					      prop="job_style_name"
					      label="岗位类型"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="job_name"
					      label="岗位名称"
					      align="center"
					      show-overflow-tooltip>
					    </el-table-column>
					    <el-table-column
					      prop="username"
					      label="任职人"
					      align="center"
					      show-overflow-tooltip>
					    </el-table-column>
					</el-table>
					<div class="table-pagination" v-show="total_number > 10">
						<el-pagination
						    @size-change="handleSizeChange"
						    @current-change="handleCurrentChange"
						    :current-page="jobsParam.page_index"
						    :page-sizes="[10, 20, 30, 40, 50, 100]"
						    :page-size="jobsParam.page_size"
						    layout="total, sizes, prev, pager, next, jumper"
						    :total="total_number">
						</el-pagination>
						<div class="pagination-button">
							<el-button 
								@click="getList"
								type="primary" icon="el-icon-refresh" 
								circle title="刷新数据" size="mini" >
							</el-button>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading:{
				status:false,
				txt:'获取数据...',
			},
            classNxt: '',
            jobs_data: [],
            jobsParam: {
                keyword: '',
                classid: this.$route.params.id,
                page_index: 1,
                page_size: 10,
            },
            total_number: 0,
        }
    },
    created() {
        this.getList();
        this.getClassName();
    },
    methods: {
        handleSizeChange(val) {
            this.jobsParam.page_index = 1;
            this.jobsParam.page_size = val;

            this.getList();
        },
        handleCurrentChange(val) {
            this.jobsParam.page_index = val;

            this.getList();
        },
        // 序号
        typeIndex(index) {
            return index + (this.jobsParam.page_index - 1) * this.jobsParam.page_size + 1;
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.jobsParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.jobsParam.keyword = '';
            this.getList();
        },
        getClassName() {
            let success = ( data => {
                this.classNxt =  data.data[0] ?  data.data[0].rename : '';
            });
            let params = {
                id: this.$route.params.id
            }

            this.$ajax.get('api/org/org', {params: params, func:{success: success}})
        },
        getList() {
            this.loading.status = true;
            const success = res => {
                this.loading.status = false;
                this.jobs_data = res.data.data;
                this.total_number = res.data.data_sum;
            }
            const fail = res => {
                this.$message.error(res.msg);
            }

  		    this.$ajax.get('api/org/getClassJobInfo',{params: this.jobsParam, func:{success: success, fail: fail}})
        },
        toLink(link) {
            this.$router.push(link + '/' + this.$route.params.id);
        },
        goToPost() {
            this.$router.push('/user/class/class-post-setting/' + this.$route.params.id);
        }
    }
}
</script>
<style lang="scss">
    .class-post {
        .zh-h5-tabs {
            padding-bottom: 20px;
        }
    }
</style>